html,body,div{
    box-sizing: border-box;
    margin:0;
    padding:0;
}
html,body{
    height: 100%;
}
@mixin ellipse{
    overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.main{
    height: 100vh;
    padding-bottom: 20px;
    overflow-y: scroll;
    background:#1b2474;
}
.container{
    width: 80%;
    margin: 0 auto;
    min-width: 1000px;
    .heter-item{
        height: 320px;
        padding:10px;
        margin-bottom: 20px;
        position: relative;
        &::before{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right,#00ffea,#00ffea 20px,transparent 20px,transparent 30px,#00ffea 30px,#00ffea 32px,transparent 32px,transparent) repeat-x top left/42px 2px;
        }
    }
    .heter-title{
        width:160px;
        font-size: 20px;
        color:#fff;
        line-height: 30px;
        padding:0 2px;
        z-index: 101;
        position: relative;
        @include ellipse;
        &.heter-title-center{
        width:120px;
            text-align: center;
            margin:0 auto;
        }
    }
}